import { Button } from 'antd';
import { useEffect, useRef, useState } from 'react';
import {
  ZyjImageEditor,
  type ZyjDrawPalette,
  type ZyjImageEditorForwardRef,
} from '../index';
function VideoEditorBasic() {
  const imageEditorRef = useRef<ZyjImageEditorForwardRef>(null);
  const [palettenInstance, setPalettenInstance] = useState<
    ZyjDrawPalette | null | undefined
  >();
  const [previewImageBolbUrl, setPreviewImagBolbUrl] = useState<string>('');
  const [maskImagBolbUrl, setMaskImagBolbUrl] = useState<string>('');
  const handleSubmit = () => {
    const temPalettenInstance = imageEditorRef.current?.getPaletteInstance();
    console.log('--temPalettenInstance--:', temPalettenInstance);
    setPalettenInstance(temPalettenInstance);

    temPalettenInstance
      ?.getFinalPreviewBolb()
      .then((imageBlob) => {
        setPreviewImagBolbUrl(URL.createObjectURL(imageBlob!));
      })
      .catch(() => {
        console.log('--canvas to preview blob error--');
      });

    temPalettenInstance
      ?.getFinallMaskBolb()
      .then((imageBlob) => {
        setMaskImagBolbUrl(URL.createObjectURL(imageBlob!));
      })
      .catch(() => {
        console.log('--canvas to mask blob error--');
      });
  };

  useEffect(() => {
    return () => {
      palettenInstance?.clear();
    };
  }, []);

  return (
    <div>
      <ZyjImageEditor ref={imageEditorRef} />
      <Button onClick={handleSubmit}>提交</Button>
      {previewImageBolbUrl && (
        <img
          src={previewImageBolbUrl}
          style={{ width: '960px', height: '960px' }}
        />
      )}

      {maskImagBolbUrl && (
        <img
          src={maskImagBolbUrl}
          style={{ width: '960px', height: '960px' }}
        />
      )}
    </div>
  );
}

export default VideoEditorBasic;
